<template>
  <el-dialog
   v-model="dialogVisible"
   title="证书管理"
   :before-close="CloseDia"
   width="70%">
    <div class="data-container">
      <el-form v-model="certExtend">
        <el-row :gutter="40">
          <el-col :span="7">
            <el-form-item label="辅助岗报名表:">
              <template v-if="certExtend.auxiliaryReport">
                <a @click="downloadFile(certExtend.auxiliaryReport)" >下载查看</a>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="7">
            <el-form-item label="身份证:">
              <template v-if="certExtend.idCert">
                <el-image
                  :src="singleAuthUrl(certExtend.idCert)"
                  :preview-src-list="arrayAuthUrl(certExtend.idCert)"
                  fit="fill"
                />
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="7">
            <el-form-item label="大中专院校、高校各阶段毕业证:">
              <template v-if="certExtend.diploma">
                <el-image
                  :src="singleAuthUrl(certExtend.diploma)"
                  :preview-src-list="arrayAuthUrl(certExtend.diploma)"
                  fit="fill"
                />
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="7">
            <el-form-item label="各阶段学历学位认证报告:">
              <template v-if="certExtend.otherDegreeCert">
                <el-image
                  :src="singleAuthUrl(certExtend.otherDegreeCert)"
                  :preview-src-list="arrayAuthUrl(certExtend.otherDegreeCert)"
                  fit="fill"
                />
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="7">
            <el-form-item label="大中专院校、高校各阶段学位证:">
              <template v-if="certExtend.degreeCert">
                <el-image
                  :src="singleAuthUrl(certExtend.degreeCert)"
                  :preview-src-list="arrayAuthUrl(certExtend.degreeCert)"
                  fit="fill"
                />
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="7">
            <el-form-item label="英语四六级证书:">
              <template v-if="certExtend.cetCert">
                <el-image
                  :src="singleAuthUrl(certExtend.cetCert)"
                  :preview-src-list="arrayAuthUrl(certExtend.cetCert)"
                  fit="fill"
                />
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="7">
            <el-form-item label="规范化培训证书:">
              <template v-if="certExtend.trainCert">
                <el-image
                  :src="singleAuthUrl(certExtend.trainCert)"
                  :preview-src-list="arrayAuthUrl(certExtend.trainCert)"
                  fit="fill"
                />
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="7">
            <el-form-item label="医师资格证:">
              <template v-if="certExtend.physicianCert">
                <el-image
                  :src="singleAuthUrl(certExtend.physicianCert)"
                  :preview-src-list="arrayAuthUrl(certExtend.physicianCert)"
                  fit="fill"
                />
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="7">
            <el-form-item label="职称证书:">
              <template v-if="certExtend.proCert">
                <el-image
                  :src="singleAuthUrl(certExtend.proCert)"
                  :preview-src-list="arrayAuthUrl(certExtend.proCert)"
                  fit="fill"
                />
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="7">
            <el-form-item label="执业证书:">
              <template v-if="certExtend.practiceCert">
                <el-image
                  :src="singleAuthUrl(certExtend.practiceCert)"
                  :preview-src-list="arrayAuthUrl(certExtend.practiceCert)"
                  fit="fill"
                />
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="7">
            <el-form-item label="职称聘任证书:">
              <template v-if="certExtend.proAppointmentCert">
                <el-image
                  :src="singleAuthUrl(certExtend.proAppointmentCert)"
                  :preview-src-list="arrayAuthUrl(certExtend.proAppointmentCert)"
                  fit="fill"
                />
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="7">
            <el-form-item label="其他证书:">
              <template v-if="certExtend.otherCert">
                <el-image
                  :src="singleAuthUrl(certExtend.otherCert)"
                  :preview-src-list="arrayAuthUrl(certExtend.otherCert)"
                  fit="fill"
                />
              </template>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
   </el-dialog>
</template>

<script setup>
import { ref, onActivated, watch, defineEmits, defineProps, computed } from 'vue'
import { getObjectById } from '@/api/recruit'
import { getFileMessage, exportFile } from '@/api/common/common'
import { singleAuthUrl, arrayAuthUrl } from '@/utils/file'

const dialogVisible = computed(() => props.isShow)

const certExtend = ref({})

const id = computed(() => props.currentId)
const props = defineProps({
  isShow: {
    type: Boolean,
    default: false
  },
  currentId: {
    type: Number
  }
})
const emits = defineEmits(['onCancel', 'click'])

const CloseDia = () => {
  emits('diaCancel', false)
}

const selectFormStore = id => {
  getObjectById('cert', id).then(res => {
    console.log(res)
    certExtend.value = res
  })
}

watch(() => {
  if (id.value) {
    selectFormStore(id.value)
  } else {
    certExtend.value = {}
  }
})

const downloadFile = uuid => {
  getFileMessage(uuid).then(res => {
    exportFile(uuid).then(content => {
      // const blob = new Blob([content], { type: 'application/vnd.ms-excel' })
      const blob = new Blob([content])
      const fileName = res.realName
      // 这是设置表格的文件名
      if ('download' in document.createElement('a')) {
        // 非IE下载
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        const binaryData = []
        binaryData.push(blob)
        elink.href = window.URL.createObjectURL(new Blob(binaryData))
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href)
        // 释放URL 对象
        document.body.removeChild(elink)
      } else {
        // IE10+下载
        navigator.msSaveBlob(blob, fileName)
      }
    })
  })
}
</script>

<style>

</style>
